<template>
    <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>我的点赞</el-breadcrumb-item>
      </el-breadcrumb>
  
      <!-- 卡片视图区域 -->
      <el-card>
        <!-- 搜索与添加区域 -->
        <el-row :gutter="20">
          <div class="mt-4">
    <el-input
    v-model="queryInfo.query"
      placeholder="输入课程资料关键字"
      class="input-with-select"
    >
      <template #prepend>
        <el-select v-model="queryInfo.capacity" placeholder="Select" style="width: 115px">
   
          <el-option label="发布人" :value="1" />
          <el-option label="课程号" :value="0" />
        
        </el-select>
      </template>
      <template #append>
        <el-button  @click="getaddoilList()"><el-icon><Search /></el-icon></el-button>
      </template>
    </el-input>
  </div>
          
        </el-row>
  
        <!-- 课程资料列表区域 -->
        <el-table :data="addoilDate" style="width: 100%" max-height="250" border>
           <!-- <el-table-column fixed prop="date" label="Date" width="150" /> -->
           <el-table-column type="index" label="#" width="60" />
           
          <el-table-column prop="cno" label="课程号" width="120" />
          <el-table-column prop="course_name" label="课程名字" width="240" />
          <el-table-column prop="tno" label="作者" width="120" />
          <el-table-column prop="addoil_time" label="点赞时间" width="240" />

          
          
         
          <el-table-column label="操作" width="260px">
            <template v-slot:default="scope">
              <!-- 取消点赞 -->
              <el-button type="danger"  size="default" @click="deleteConent(scope.row.id)"><el-icon><Delete /></el-icon></el-button>
              <!-- 上传新的资料 -->
              
              
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-card>
  
    
   
      <!-- 上传资料 -->
      
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        // 获取课程列表的参数对象
        queryInfo: {
          query: '',
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 10,
          //选择是课程的类型
          capacity:0
        },
        addoilDate: [],
        total:0,

        
      }
    },
    created() {
      this.getaddoilList()
    },
    methods: {
      async getaddoilList() {
        this.queryInfo.capacity = window.sessionStorage.getItem('token') 
        const { data: res } = await this.$http.post('addoilList',this.queryInfo)
          if (res === null) {
              return this.$message.error('获取课程数据列表失败！')
             }
             console.log(res)
          this.addoilDate = res
        },
      // 监听 pagesize 改变的事件
      handleSizeChange(newSize) {
        // console.log(newSize)
        this.queryInfo.pagesize = newSize
        this.getaddoilList()
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getaddoilList()
      },
      // 监听 switch 开关状态的改变
      async CourseDateStateChanged(studyDate) {
        console.log(studyDate.id)

        const { data: res } = await this.$http.put(
          `studyDateStatus/${studyDate.id}`
        )
        console.log(res)
        if (res !== 200) {
          return this.$message.error('更新资料状态失败！')
        }
        this.$message.success('更新资料状态成功！')
      },
      addDialogClosed() {
        this.addForm=[]
        this.$refs.addFormref.resetFields()
      },
      openUploadContent(cno,sno){
        alert("暂未开发")
      },
    
       deleteConent(id){
        if(confirm("你确认删除")){
         alert("暂未开发")
        }
      },
     
       uploadContent(){
        alert("暂未开发")
        }
       
    }
  }

  </script>
  
  <style lang="less" scoped>
  </style>
  